<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LOL道具商城-商品详情</title>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/goodsDetails.css">

</head>

<body>
  <div class="menu com_menu">
    <!-- 头部信息 -->
    <div class="header">
      <!-- 左边logo -->
      <div class="logo"><a href=""></a></div>
      <!-- 搜索框 -->
      <div class="search_props">
        <input type="text" class="search" placeholder="输入道具进行搜索" value="">
        <button class="search_btn"></button>
      </div>
      <!-- 右边logo -->
      <div class="lol_logo"><a href=""></a></div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <ul>
        <li><a href="../index.html">首页</a></li>
        <li><a href="./goodsList.html">商品列表</a></li>
        <li class="nav_active"><a href="#" style="color:#fef7ec;">商品详情</a></li>
        <li><a href="">限时活动</a></li>
        <li><a href="">聚豆乐园</a></li>
        <li><a href="">周边商城</a></li>
        <li><a href="">个人中心</a></li>
      </ul>
      <!-- 购物车 -->
      <div class="shopping_cart">
        <div></div>
        <a href="./goodsCart.html">购物车</a>

      </div>
    </div>
  </div>
  <!-- 商品列表 -->
  <!-- 主要内容 -->
  <div class="content">
    <!-- 商品分类栏 -->
    <ul class="classification">
      <li><a href="#" style=" color: #36ab87;">全部分类</a></li>
      <li><a href="#">英雄</a></li>
      <li><a href="#">表情</a></li>
      <li><a href="#">海克斯及其他</a></li>
      <li><a href="#">云顶之弈</a></li>
      <li><a href="#">皮肤</a></li>
      <li><a href="#">道具</a></li>
      <li><a href="#">守卫眼皮肤</a></li>
      <li><a href="#">道具包</a></li>
    </ul>
    <div class="loc">您现在的位置：&nbsp;&nbsp;<a href="../index.html">首页</a>
      &nbsp;&nbsp;&gt;&nbsp;&nbsp;
      <span>商品详情</span>
    </div>
    <div class="lift_goods">
      <h3>
        热门排行
        <span></span>
      </h3>
      <ul>
        <li>
          <div>01</div>
          <img src="https://game.gtimg.cn/images/daoju/dbm/lol/20170216_28862_2202.jpg">
          <h6>猩红之月 烬</h6>
          <p>Q币价: 79.00 Q币</p>
          <p>微信价: <b>￥76.63</b></p>
        </li>
        <li>
          <div>02</div>
          <img src="https://game.gtimg.cn/images/daoju/dbm/lol/20170315_0_5169.jpg">
          <h6>屠龙勇士 赵信</h6>
          <p>Q币价: 79.00 Q币</p>
          <p>微信价: <b>￥76.63</b></p>
        </li>
        <li>
          <div>03</div>
          <img src="https://game.gtimg.cn/images/daoju/dbm/lol/121003_190.jpg">
          <h6>死亡绽放 卡兹克</h6>
          <p>Q币价: 79.00 Q币</p>
          <p>微信价: <b>￥76.63</b></p>
        </li>
        <li>
          <div>04</div>
          <img src="https://game.gtimg.cn/images/daojushop/uploads/news/201507/20150715220820_82148.jpg">
          <h6>泳池派对 德莱文</h6>
          <p>Q币价: 79.00 Q币</p>
          <p>微信价: <b>￥76.63</b></p>
        </li>
      </ul>
    </div>
    <div class="right_goods">
      <div class="goodsContent">
        还没选择商品
        <!-- <div class="goods_img">
          <div class="small">
            <img src="https://game.gtimg.cn/images/daoju/app/lol/big/pkg-28533.jpg?_t=1631097596" alt="">
            <div class="len"></div>
          </div>
          <div class="large">
            <img src="https://game.gtimg.cn/images/daoju/app/lol/big/pkg-28533.jpg?_t=1631097596" alt="">
          </div>
        </div>
        <div class="goodsBuy">
          <h3>2021 五杀 大礼包</h3>
          <div class="goodsBuyPrice">
            <p>精粹价：500</p>
            <p>点券价： <span>555</span></p>
          </div>
          <p>期限：永久</p>
          <label><button class="addCart">加入购物车</button></label>
        </div> -->
      </div>
    </div>
  </div>


  <!-- 尾部信息 -->
  <footer>
    <div class="foot_main">
      <ul>
        <p>我是新手</p>
        <li>如何购买</li>
        <li>如何赠送</li>
        <li>如何获取聚豆</li>
        <li></li>
      </ul>
      <ul>
        <p>个人中心</p>
        <li>发货时间</li>
        <li>如何领取</li>
        <li>补发规则</li>
        <li>Vip价定义</li>
        <li>道具状态定义</li>
      </ul>
      <ul>
        <p>支付方式</p>
        <li>支付方法</li>
        <li>购物点支付</li>
        <li>如何重置</li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <p>腾讯在线服务</p>
        <li>腾讯在线中心</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <p>掌上道聚城</p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <p>道聚城公众号</p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </footer>

  <script type="text/html" id="goodDetails">
    {{each good prod}}
    <div class="goods_img">
      <div class="small">
        <img src={{prod.valiDate[0].pic}} alt="">
        <div class="len"></div>
      </div>
      <div class="large">
        <img src={{prod.valiDate[0].pic}} alt="">
      </div>
    </div>
    <div class="goodsBuy">
      <h3>{{prod.valiDate[0].name}}</h3>
      <div class="goodsBuyPrice">
        <p>精粹价：{{prod.valiDate[0].iGoldPrice}}</p>
        <p>点券：<span>{{prod.valiDate[0].curPrice}}</span></p>
      </div>
      <p>期限：{{prod.valiDate[0].day}}</p>
      <label>
        <a href="#" class="addCart">加入购物车</a>
        <a href="../html/goodsCart.html" target="_blank" class="lookCart">查看购物车</a>
      </label>
    </div>
    {{/each}}
    </script>

  <script src="../libs/jquery.js"></script>
  <script src="../libs/template-web.js"></script>
  <script src="../js/goodsCart.js"></script>
  <script src="../js/goodsDetails.js"></script>

</body>

</html>